<template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog-box">
      <i
        class="iconfont icon-guanbi score_closeDialog"
        @click="$emit('close')"
      ></i>

      <h3 class="dialog-title">修改评分</h3>

      <div class="name-moudle">
        <div class="name-item">
          <span class="label">张一凡</span>
        </div>

        <div class="name-item">
          <span class="value">排名：11</span>
        </div>
      </div>

      <scoreInput v-model="yourScore" title="理论考核得分："> </scoreInput>

      <scoreInput
        class="scoreInputMargin"
        v-model="yourScore"
        title="技能考核得分："
      >
      </scoreInput>

      <button class="scoreSave-btn" @click="$emit('close')">保存</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import scoreInput from "./scoreInput.vue";
defineProps({
  visible: Boolean, // 控制弹框显示/隐藏
  number: Number, // 参赛编号
});

const yourScore = ref(80); // 初始化分数值

defineEmits(["close"]); // 点击按钮关闭弹框
</script>

<style scoped>
/* 遮罩层 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 弹框主体 */
.dialog-box {
  background: #fff;
  border-radius: 0.1rem;
  padding: 0.48rem 0.48rem;
  text-align: center;
  width: 5.84rem;
  position: relative;
}

.score_closeDialog {
  position: absolute;
  top: 0.1rem; /* 微调距离顶部的距离 */
  right: 0.1rem; /* 微调距离右侧的距离 */
  border: none;
  background: transparent; /* 透明背景 */
  font-size: 0.36rem; /* 调整大小 */
  cursor: pointer; /* 鼠标手型 */
  color: #86909c; /* 颜色 */
  /* 以下属性有助于获得更好的点击体验，根据需要添加 */
  width: 0.7rem;
  height: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.name-moudle {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  /* box-sizing: border-box; */
  /* background: #ff5858; */
  margin-bottom: 0.4rem;
}
.name-item {
  width: 50%;
  display: flex;
  align-items: center; /* 垂直居中可以保留 */
  justify-content: flex-start;
  /* border-right: 0.01rem solid #fff; */
}
.name-item .label {
  color: #1d2129; /* 左侧文字颜色 */
  font-size: 0.28rem;
  line-height: 0.44rem;
  text-align: left;
}
.name-item .value {
  color: #1d2129; /* 右侧文字颜色 */
  font-size: 0.28rem;
  line-height: 0.44rem;
  text-align: left;
}

.dialog-title {
  font-size: 0.34rem; /* 字体大小 */
  font-weight: 400;
  color: #333; /* 颜色 */
  text-align: center;
  line-height: 0.4rem;
  margin-bottom: 0.32rem;
}

.scoreInputMargin {
  margin-top: 0.4rem;
}

.scoreSave-btn {
  width: 100%;
  height: 0.68rem;
  background: #2468f2;
  color: #fff;
  border: none;
  border-radius: 0.32rem;
  font-size: 0.28rem;
  cursor: pointer;
  margin-top: 0.7rem;
}

.scoreSave-btn:active {
  background: #1d54c9;
}
</style>
